<template>
  <div class="home">
    <h1 style="color: red; text-align: center">文字识别</h1>
    <div class="section">
      <div class="wrapper" v-loading="loading">
        <h2>图片上传</h2>
        <el-upload
            class="avatar-uploader"
            action="/api/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="imageUrl"/>
          <div v-else class="avatar-uploader-icon">
            <plus/>
          </div>
        </el-upload>
        <h2>识别结果</h2>
        <h2 v-html="ocrText" style="border: 1px solid red;
      padding: 1rem;
      overflow-y: auto" v-if="ocrText"></h2>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src

import {getCurrentInstance, ref} from "vue";
import {Plus} from '@element-plus/icons'

export default {
  name: 'Home',
  components: {
    Plus
  },
  setup() {
    const {proxy} = getCurrentInstance()
    const imageUrl = ref('')
    const fileUrl = ref('')
    const loading = ref(false)
    const ocrText = ref('')
    const handleAvatarSuccess = (r) => {
      fileUrl.value = r;
      imageUrl.value = '/api/download/' + r;
      getOcr();
    }
    const beforeAvatarUpload = () => {
    }
    const getOcr = async () => {
      loading.value = true
      let rs = await proxy.$http.get(`/api/getOcr/${fileUrl.value}`)
      loading.value = false;
      ocrText.value = rs.data.results[0].data.map(e => e.text).join('<br/>')
    }
    return {
      imageUrl,
      handleAvatarSuccess,
      beforeAvatarUpload,
      loading,
      ocrText
    }
  }
}
</script>

<style lang="less" scoped>
.home {
  height: 100%;
  .section {
    height: 100%;
    display: flex;
    flex-direction: column;
    .wrapper {
      flex: 1;
      flex-grow: 1;
      overflow: scroll;
      width: 80rem;
      margin: 0px auto;
      text-align: center;
      padding: 2rem;
      overflow: auto;
      box-shadow: -10px 0 10px #F5F5F5,  10px 0 10px #F5F5F5, 
        0 -10px 10px #F5F5F5;
      &::-webkit-scrollbar {
        display: none; /* Chrome Safari */
      }
      .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        text-align: center;
        border: 1px dashed #409eff;;
      }

      .imageUrl {
        font-size: 28px;
        color: #8c939d;
        width: 360px;
        height: 360px;
        text-align: center;
      }
    }
  }
}

</style>
